<template>
	<!-- 文本输入框 -->
	<view v-if="type=='input'" class="info-grid h-104">
		<text :class="labelClass">{{ labelName }}</text>
		<view class="row-box right pcol-l">
			<input v-if="attrName=='phone'" style="max-width: 540rpx;" type="number" :value="attrValue" maxlength="11" class="input" placeholder="请输入您的手机号码" placeholder-class="placeholder" @input="input">
			<input v-else style="max-width: 540rpx;" type="text" :value="attrValue" :maxlength="maxlength" class="input" :placeholder="placeholder" placeholder-class="placeholder" @input="input">
		</view>
	</view>
	<!-- 点击跳转选择 -->
	<view v-else-if="type=='select'" class="info-grid h-104">
		<text :class="labelClass">{{ labelName }}</text>
		<view class="row-box right pcol-l" @click="selectHandle()">
			<view v-if="attrName=='age'">
				<text v-if="attrValue" class="s26">{{ ageDate }}</text>
				<text v-else class="s26 grey-light">请选择</text>
			</view>
			<view v-else-if="attrName=='ageRange'">
				<text v-if="attrValue!=null" class="s26">{{ ageRangeName }}</text>
				<text v-else class="s26 grey-light">请选择</text>
			</view>
			<u-icon class="ml-10 mr-10" name="arrow-right" :color="nomarlColor" size="24"></u-icon>
		</view>
		
		<!-- 年龄弹窗 -->
		<u-calendar v-model="showCalendar" mode="date" max-date="2123-05-20" :active-bg-color="primaryColor" @change="selectDate"></u-calendar>
		
		<!-- 年龄区间选择器 -->
		<u-select v-model="showAgeRange" mode="single-column" title="请选择年龄" :confirm-color="primaryColor" :list="ageRanges" @confirm="selectAge"></u-select>
	</view>
	<!-- 单选 -->
	<view v-else-if="type=='choice'" class="info-grid h-104">
		<text :class="labelClass">{{ labelName }}<text v-if="attrName=='isSterilization'" class="red">*</text></text>
		<scroll-view v-if="attrName=='cate'" scroll-x="true" style="white-space: nowrap;">
			<view class="row-box">
				<view
					v-for="(item, index) in choiceList" :key="index"
					class="choice mr-base grey-light"
					:class="attrValue==index?'select':''"
					@click="select(attrName, index)"
				>
					{{ item }}
				</view>
			</view>
		</scroll-view>
		<view v-else class="row-box right" style="height: 100%;">
			<view
				v-for="(item, index) in choiceList" :key="index"
				class="choice mr-base grey-light"
				:class="attrValue==index?'select':''"
				@click="select(attrName, index)"
			>
				{{ item }}
			</view>
		</view>
	</view>
	<!-- 步骤条 -->
	<view v-else-if="type=='step'" class="info-grid h-124">
		<text :class="labelClass">{{ labelName }}</text>
		<view class="col-box right">
			<view class="row-box">
				<image class="heal-icon" :src="attrValue>=1?iconSelectedUrl:iconUrl" mode="aspectFill"
					:class="attrValue>=1?'select':''" @click="select(attrName, 1)">
				</image>
				<view class="line ml-10 mr-10" :class="attrValue>=2?'back-primary':''"></view>
				<image class="heal-icon" :src="attrValue>=2?iconSelectedUrl:iconUrl" mode="aspectFill"
					:class="attrValue>=2?'select':''" @click="select(attrName, 2)">
				</image>
				<view class="line ml-10 mr-10" :class="attrValue>=3?'back-primary':''"></view>
				<image class="heal-icon" :src="attrValue>=3?iconSelectedUrl:iconUrl" mode="aspectFill"
					:class="attrValue>=3?'select':''" @click="select(attrName, 3)">
				</image>
			</view>
			<view v-if="attrName=='vaccine'" class="row-box sb">
				<text class="s24 heal-text" :class="attrValue>=1?'primary':''">第一针</text>
				<text class="s24 heal-text ml-114" :class="attrValue>=2?'primary':''">第二针</text>
				<text class="s24 heal-text ml-114" :class="attrValue>=3?'primary':''">第三针</text>
			</view>
			<view v-if="attrName=='killWorm'" class="row-box sb">
				<text class="s24 heal-text" :class="attrValue>=1?'primary':''">一次</text>
				<text class="s24 heal-text ml-114" :class="attrValue>=2?'primary':''">二次</text>
				<text class="s24 heal-text ml-114" :class="attrValue>=3?'primary':''">三次</text>
			</view>
		</view>
	</view>
	<!-- 多行文本框 -->
	<textarea v-else-if="type=='textarea'"
		class="radius-base pcol-s prow-s detail-input"
		:class="bgClass"
		:value="attrValue" :maxlength="maxLength"
		placeholder-style="fontSize: 28rpx;color: #999999;line-height: 36rpx;"
		:placeholder="placeholder"
		:disabled="unEdit"
		@input="input"
	>
	</textarea>
	<!-- 示例 -->
	<view v-else-if="type=='example'" class="row-box sb h-104">
		<text :class="labelClass">{{ labelName }}</text>
		<u-icon v-if="showExam" class="pcol-lg" name="error-circle-fill" :color="primaryColor" :size="36"
			label='示例' label-size="28" label-pos="right" :label-color="primaryColor" margin-left="10" @click="previewImage(1, [examUrl])">
		</u-icon>
	</view>
</template>

<script>
	import { mapState,mapMutations } from "vuex"
	export default {
		props: {
			type: {
				type: String,
				default: 'input'
			}, // 表单信息类型， input文本输入框 select点击跳转选择 choice单选 textarea多行文本框 step步骤条
			
			labelName: {
				type: String,
				default: '性别'
			}, // 左侧label的名称
			labelClass: {
				type: String,
				default: ''
			}, // 左侧label的颜色class 如：grey-light
			
			attrName: {
				type: String,
				default: ''
			}, // 属性名称
			attrValue: {
				default: ''
			}, // 属性值
			
			maxlength: {
				type: Number,
				default: 10
			}, // 最大长度
			
			url: {
				type: String,
				default: ''
			}, // 点击选择跳转地址
			
			choices: {
				type: Array,
				default: function () {
					return []
				}
			}, // 单选项数组
			
			cate: {
				type: Number,
				default: 1
			}, // 品种选择所需的种类 狗猫鸟鱼小宠12345
			breedId: {
				default: 0
			}, // 品种选择所需的品种id
			
			maxLength: {
				type: Number,
				default: 100
			}, // 多行文本框最大字数
			placeholder: {
				type: String,
				default: ''
			}, // 多行文本占位符
			bgClass: {
				type: String,
				default: 'back-grey'
			}, // 多行文本框背景颜色
			
			iconUrl: {
				type: String,
				default: ''
			}, // 步骤图标路径
			iconSelectedUrl: {
				type: String,
				default: ''
			}, // 步骤选择图标路径
			
			showExam: {
				type: Boolean,
				default: true
			}, // 是否显示示例
			examUrl: {
				type: String,
				default: ''
			}, // 示例图路径
			
			unEdit: {
				type: Boolean,
				default: false
			}, // 多行文本框是否禁止编辑
		},
		data() {
			return {
				// --用户相关
				sexs: ['女神', '男神'], // 性别列表
				ageTypes: ['70后', '80后', '90后', '00后'], // 年代列表
				exps: ['无', '有'], // 养宠经验列表
				maritals: ['已婚', '单身', '恋爱中'], // 婚姻状况列表
				housings: ['自有住房', '整租', '合租'], // 住房情况列表
				
				// --宠物相关
				cates: ['汪汪', '喵喵', '鸟儿', '鱼儿', '小宠'], // 种类列表
				levels: ['宠物级', '繁育级', '赛级'], // 级别列表
				petSexs: ['母', '公'], // 性别列表
				isSterilizations: ['未绝育', '已绝育'], // 绝育列表
				ageRanges: [ {label: '小于1个月', value: 0}, {label: '1-3月', value: 1}, {label: '3-6月', value: 2}, {label: '6-9月', value: 3}, {label: '1年以上', value: 4}], // 年龄区间列表
				showCalendar: false, // 是否展示日期选择
				showAgeRange: false, // 是否展示年龄区间选择
				minDate: '',  // 日历起始日期
				ageDate: '', // 生日日期
				ageRangeName: '', // 年龄区间
			}
		},
		computed: {
			
			// 动态单选列表
			choiceList() {
				if (this.choices.length) return this.choices
				return this[`${this.attrName}s`]
			}
		},
		watch: {
			cate(newValue, oldValue) {
				if (newValue > 2 && this.attrName=='breed') {
					this.$emit("update:breedId", null)
					this.$emit("update:breed", '')
				}
			}
		},
		mounted() {
			if (this.attrName=='age') { // 宠物年龄生日
				// 获取当前日期
				this.getNowDate()
			}
			
		},
		methods: {
			// 文本输入
			input(e) {
				this.$emit("update:attrValue", e.detail.value)
			},
			
			// 选择
			select(type, index) {
				switch (type){
					case 'sex': // 直接赋值
					case 'ageType': // 直接赋值
					case 'exp':
					case 'marital':
					case 'housing':
					case 'level':
					case 'petSex':
					case 'isSterilization':
						this.$emit("update:attrValue", index)
						break;
					case 'isSterilization': // 再次点击取消选择
						if (this.attrValue == index) {
							this.$emit("update:attrValue", null)
						} else {
							this.$emit("update:attrValue", index)
						}
						break;
					case 'cate': // 选择种类要回调，清空级别、性别、年龄
						this.$emit("update:attrValue", index)
						this.$emit("clearAttr", index)
						break;
					case 'vaccine': // 疫苗驱虫特殊
					case 'killWorm':
						if (this.attrValue != index) {
							this.$emit("update:attrValue", index)
						} else if (this.attrValue == index && this.attrValue && index) {
							this.$emit("update:attrValue", this.attrValue - 1)
						}
						break;
					default:
						break;
				}
			},
			
			// 选择日期
			selectDate(e) {
				console.log(e)
				let arr = e.result.split('-')
				this.ageDate = arr[0] + '-' + arr[1] + '-' + arr[2]
				this.$emit("update:attrValue", Date.parse(new Date(e.result)).toString())
			},
			// 获取当前日期
			getNowDate() {
				let date = new Date()  //当前时间
				let year = date.getFullYear()  //返回指定日期的年份
				let month = this.repair(date.getMonth() + 1)  //月
				let day = this.repair(date.getDate())  //日
				this.minDate = year + '-' + month + '-' + day
			},
			// 不够10补0
			repair(i){
				if (i >= 0 && i <= 9) {
					return "0" + i
				} else {
					return i
				}
			},
			
			// 选择年龄区间
			selectAge(e) {
				console.log(e)
				this.$emit("update:attrValue", e[0].value)
				this.ageRangeName = e[0].label
			},
			
			// 点击选择处理
			selectHandle() {
				if (this.attrName=='age') { // 年龄选择
					this.showCalendar = true
				} else if (this.attrName=='ageRange') { // 年龄区间选择
					this.showAgeRange = true
				}
			}
		},
	}
</script>

<style lang="scss">
	// 高度
	.h-104 {
		height: 104rpx;
	}
	// 信息栅格
	.info-grid {
		display: grid;
		grid-template-columns: 1fr 588rpx;
		align-items: center;
		// 选项
		.choice {
			height: 56rpx;
			line-height: 52rpx;
			padding: 0 28rpx;
			background: #f6f6f6;
			border-radius: 28rpx;
			border: 2rpx solid #f6f6f6;
			color: $uni-text-color-grey-light;
			font-size: 26rpx;
			&:last-child {
				margin-right: 0;
			}
			&.select {
				background: $uni-bg-color-primary-10;
				border: 2rpx solid $uni-color-primary;
				color: $uni-color-primary;
			}
		}
	}
	// 详细要求输入框
	.detail-input {
		box-sizing: border-box;
		width: 100%;
		height: 238rpx;
		font-size: 26rpx;
	}
	// 手机号输入
	.placeholder, .input {
		text-align: right;
	}
	// 健康图标
	.heal-icon {
		display: block;
		width: 72rpx;
		height: 72rpx;
		border-radius: $uni-border-radius-circle;
		border: 2rpx solid #ffffff;
		&.select {
			border: 2rpx solid #ffffff;
		}
	}
	// 健康文本
	.heal-text {
		display: block;
		width: 76rpx;
		text-align: center;
	}
	// 分割线
	.line {
		width: 94rpx;
		height: 2rpx;
		background: #e5e5e5;
	}
	// 文字保持分割线一样间隔
	.ml-114 {
		margin-left: 114rpx;
	}
</style>
